<template>
  <div class="comment-input">
    <!-- Input and button container -->
    <el-row gutter="10" align="middle">
      <el-col :span="18">
        <!-- Text area input -->
        <el-input
          v-model="comment"
          placeholder="输入评论内容到这"
          type="textarea"
          rows="3"
        ></el-input>
      </el-col>

      <el-col :span="6" class="button-container">
        <!-- Publish button -->
        <el-button
          type="primary"
          @click="submitComment"
          :disabled="comment.trim() === ''"
          class="publish-button"
        >
          提交
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue';

// Define emits
const emit = defineEmits(['submit']);

// Comment input state
const comment = ref<string>('');

// Function to handle the submit action
const submitComment = () => {
  if (comment.value.trim() !== '') {
    emit('submit', comment.value);
    comment.value = '';
  }
};
</script>

<style scoped>
.comment-input {
  width: 100%;
  max-width: 450px; /* Reduced max-width for a more compact feel */
  margin: 10% auto; /* Center and add some top margin */
}

.button-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-input__inner {
  font-size: 14px; /* Smaller font for a cleaner look */
  border-radius: 6px; /* Slightly rounded corners for a softer appearance */
}

.publish-button {
  height: 36px;
  width: 100%;
  padding: 0;
  border-radius: 6px;
  font-size: 14px;
  line-height: 36px; /* Ensures text is vertically centered */
}

.el-button {
  margin-left: 0; /* Adjust margins for a tighter layout */
}

.el-input {
  height: 80px; /* Reduced height to make the text box less dominant */
}
</style>
